<template>
  <div class="main">
    <Nav />
    <div class="right_route">
      <div class="top_content">
        <div class="left_top_content">
          <h3>维护人员业绩统计</h3>
        </div>
        <div class="right_top_content">
          <Picker @time_change="time_change" />
        </div>
      </div>
      <div v-if="init_echart">
        <div class="top_table">
          <TopTable :list="table_list" />
        </div>
        <div class="pagination">
          <Pagination :list="page_list" :limit="limit" @change="page_change" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import Nav from "@/components/public/nav.vue"
import TopTable from "@/components/home/data/outstanding/topTable.vue"
import { get_outstanding } from "@/request/api/data"
import Pagination from "@/components/home/task/pagination.vue"
const limit = ref(10)
let init_echart = ref(true)
let table_list = ref("")
let page_list = ref("")
let params_init: any = {
  start_time: null,
  end_time: null,
  limit: limit.value,
  page: 1,
}
const get_data_use = async () => {
  let { data } = await get_outstanding(params_init)
  table_list.value = data.list
  page_list.value = data.pageData
}
// 时间改变
async function time_change(val: any) {
  init_echart.value = false
  console.log(val, "val");
  params_init.page = 1
  params_init.start_time = val?.[0]
  params_init.end_time = val?.[1]
  await get_data_use()
  init_echart.value = true
}
// 页数发生改变
const page_change = (val: any) => {
  params_init.page = val
  get_data_use()
}
onMounted(() => {
  get_data_use()
})
</script>

<style lang="scss" scoped>
.main {
  display: flex;

  .right_route {
    padding: 10px 20px 0 20px;
    flex: 1;
    box-sizing: border-box;
    background: rgba(#FFF, 1);
    width: calc(100vw - 200px);

    .top_content {
      display: flex;
      justify-content: space-between;

      .left_top_content {
        h3 {
          margin: 10px 0 20px;
          color: #1f2f3d;
          font-weight: 400;
          font-size: 22px;

          span {
            @include font(#666666, 14, 32);
            font-weight: 400;
            margin-left: 20px;
          }
        }
      }
    }

    .top_echarts {
      border: 1px solid rgba(121, 121, 121, 1);
      margin-top: 20px;
    }

    .top_table {
      margin-top: 10px;
    }

    .pagination {
      margin: 20px 0;
      display: flex;
      justify-content: right;
    }
  }

  .right_top_content {
    margin-right: 40px
  }
}
</style>